<template>
  <ul>
    <li
      v-for="(node, index) in data"
      :key="node.id"
      :style="{ textIndent: `${depth * 8}px` }"
    >
      <el-tooltip
        effect="dark"
        :content="node.label"
        placement="top"
        :show-arrow="false"
        :hide-after="0"
      >
        <div
          class="string_con"
          @click="handle_click(node, $event)"
          :class="{ highlighted: node.id === active_node }"
        >
          <span class="index">{{ get_node_number(index) }}</span>
          <span class="label">{{ node.label }}</span>
        </div>
      </el-tooltip>
      <TreeMenu
        v-if="node.children"
        :data="node.children"
        :depth="depth + 1"
        :parent-number="get_node_number(index)"
        :activeNode="active_node"
        @node-click="handle_code_click"
      />
    </li>
  </ul>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";

const props = defineProps({
  data: {
    type: Array,
    required: true,
  },
  depth: {
    type: Number,
    default: 0,
  },
  parent_number: {
    type: String,
    default: "",
  },
  active_node: {
    type: String,
    default: null,
  },
});
const emit = defineEmits(["node-click"]);
// 新增：使用 ref 来跟踪当前激活的节点

// 生成节点序号
const get_node_number = (index) => {
  return props.parent_number
    ? `${props.parent_number}.${index + 1}`
    : `${index + 1}`;
};

// 处理点击事件
const handle_click = (node, event) => {
  event.stopPropagation();
  // 向父组件传递当前点击的节点数据
  emit("node-click", node);
};

// 处理子节点的点击事件
const handle_code_click = (node) => {
  emit("node-click", node);
};
</script>

<style scoped lang="less">
ul {
  list-style-type: none;
  padding-left: 0;
}

li {
  cursor: pointer;
}
.string_con{
  height: 30px;
  line-height: 30px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  .index{
    color: @ls;
    font-weight: 900;
  }
  .label{
    padding-left: 5px;
  }
}

.highlighted {
  font-weight: 900;
}

</style>
